<template>
  <div class="home">
    <!-- <img alt="Vue logo" src="../assets/logo.png">
    <hello-World msg="Welcome to Your Vue.js App"/> -->
    <h1>{{list}}</h1>
    <h1>{{message}}</h1>
    <button @click="addTask">添加任务</button>
    <h1>总价格：{{price}}</h1>
    <ul>
        <li v-for="(item,index) in taskList" :key="index">{{item.title}}</li>
    </ul>
  </div>
</template>

<script>
// @ is an alias to /src
// import helloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'HomeView',
  data() {
    return {
        
    }
  },
  created() {
    this.$store.dispatch('getList')
    // console.log(this.$store);
  },
  components: {
    // helloWorld
  },
//   从计算属性获取state，getters里面的数据，是vuex官方的用法
  computed:{
    list(){
        return this.$store.state.list
    },
    message(){
        return this.$store.state.msg
    },
    price(){
        return this.$store.getters.getPrice
    },
    taskList(){
        return this.$store.state.taskList
    }
  },
  methods: {
    addTask(){
        // commit可以出发mutaions里面的方法   第一个参数是方法名，第二个参数如果有参数就写，没有参数就不写
       this.$store.commit('add',{title:'旅游',status:false}) 
    }
  },
  
}
</script>
